function Magnifier({mBox, span, lBox, lBimg, sBox, left, right, sImgs, index=0, mBimg}){
  this.mBox = mBox;
  this.span = span;
  this.lBox = lBox;
  this.lBimg = lBimg;
  this.mBimg = mBimg;
  // 0. 接收参数获取元素，获取默认显示图片索引
  this.sBox = sBox;
  // this.left = left;
  // this.right = right;
  this.sImgs = sImgs;
  this.index = index;
  // 1. 绑定事件
  this.addEvent();
}
Magnifier.prototype.addEvent = function(){
  const that = this;
  this.mBox.onmouseover = function(){
    that.show();
    that.init();
  }
  this.mBox.onmouseout = function(){
    that.hide()
  }
  this.mBox.onmousemove = function(eve){
    const e = eve || window.event;
    that.move(e);
  }
  // 2. 具体的事件绑定
  for(let i=0;i<this.sImgs.length;i++){
    this.sImgs[i].index = i;
    this.sImgs[i].onclick = function(){
      // 3. 设置高亮样式
      that.setActive(this.index);
      // 4. 根据点击的图片修改中图和大图
      that.changeImg(this.index);
    }
  }
  // 6. 计算初始已经显示的图片数量
  this.pageIndex = parseInt(350 / (this.sImgs[0].offsetWidth + 8));
  this.nowIndex = this.pageIndex;
  // 5. 分页器的左右按钮绑定事件
  this.left.onclick = function(){
    // 6-1. 计算索引
    if(that.nowIndex !== that.pageIndex){
      that.nowIndex--;
    }
    // 7-1. 根据索引切换图片
    that.moveImg();
  }
  this.right.onclick = function(){
    // 6-2. 计算索引
    if(that.nowIndex !== that.sImgs.length-1){
      that.nowIndex++;
    }
    // 7-2. 根据索引切换图片
    that.moveImg();
  }
}
Magnifier.prototype.moveImg = function(){
  this.sBox.style.left = -(this.nowIndex - this.pageIndex) * (this.sImgs[0].offsetWidth + 8) + "px";
}
Magnifier.prototype.changeImg = function(now){
  this.mBimg.src = `./imgs/m${now}.jpg`;
  this.lBimg.src = `./imgs/l${now}.jpg`;
}
Magnifier.prototype.setActive = function(now){
  // 清除上一个（默认索引）元素的样式
  this.sImgs[this.index].style.borderColor = "transparent";
  // 给当前点击元素添加样式
  this.sImgs[now].style.borderColor = "blue";
  // 将当前点击元素的索引设置给默认索引
  this.index = now;
}
Magnifier.prototype.show = function(){
  this.span.style.display = "block";
  this.lBox.style.display = "block";
}
Magnifier.prototype.hide = function(){
  this.span.style.display = "none";
  this.lBox.style.display = "none";
}
Magnifier.prototype.move = function(e){
  let l = e.pageX - this.mBox.offsetLeft - this.mBox.offsetParent.offsetLeft - this.span.offsetWidth/2;
  let t = e.pageY - this.mBox.offsetTop - this.mBox.offsetParent.offsetTop - this.span.offsetHeight/2;
  if(l < 0) l = 0;
  if(t < 0) t = 0;
  if( l > this.mBw - this.span.offsetWidth ){
    l = this.mBw - this.span.offsetWidth;
  }
  if( t > this.mBh - this.span.offsetHeight ){
    t = this.mBh - this.span.offsetHeight;
  }
  this.span.style.left = l + "px";
  this.span.style.top = t + "px";
  const x = l / (this.mBw - this.span.offsetWidth);
  const y = t / (this.mBh - this.span.offsetHeight);
  this.lBimg.style.left = -x * ( this.lBimgW - this.lBw ) + "px";
  this.lBimg.style.top = -y * ( this.lBimgH - this.lBh ) + "px";
}
Magnifier.prototype.init = function(){
  this.lBw = this.lBox.offsetWidth;
  this.lBh = this.lBox.offsetHeight;
  this.lBimgW = this.lBimg.offsetWidth;
  this.lBimgH = this.lBimg.offsetHeight;
  this.mBw = this.mBox.offsetWidth;
  this.mBh = this.mBox.offsetHeight;

  const x = this.lBw / this.lBimgW;
  const y = this.lBh / this.lBimgH;
  this.span.style.width = x * this.mBw + "px";
  this.span.style.height = y * this.mBh + "px";
}

onload = function(){
  new Magnifier({
    mBox: $(".m_box"),
    span: $(".m_box span"),
    lBox: $(".l_box"),
    lBimg: $(".l_box img"),
    mBimg: $(".m_box img"),
    sBox: $(".s_box ul"),
    left: $(".left"),
    right: $(".right"),
    sImgs: $(".s_box ul").children
  });
}






function $(select){
  return document.querySelector(select)
}
